<link rel="stylesheet" href="{$BACKEND_CSS}dataTable.css" type="text/css" />
<link rel="stylesheet" href="{$BACKEND_CSS}Form.css"      type="text/css" />
<link rel="stylesheet" href="{$BACKEND_CSS}Buttons.css"   type="text/css" />
<link rel="stylesheet" href='{$BACKEND_CSS}osx.css'       type="text/css" />

<script type="text/javascript" src="{$BACKEND_JS}sliding.form.js"></script>
<script type="text/javascript" src="{$BACKEND_JS}BlocksControl.js"></script>
<script src="{$EXTERNAL_JS}jquery/simplemodal/jquery.simplemodal.js"       type="text/javascript"></script> 
<script src="{$EXTERNAL_JS}jquery/simplemodal/osx.js"       type="text/javascript"></script>
<div  class="clear"> </div>	
    <div id="Fcontent">
        <div id="wrapper">
        
            <div id="steps">
               
                    <fieldset class="step">
                    <form>
                        <legend>{$lang.all_blocks}</legend>
                        
                        <div id="tableHolder">
                            <div id="tableActions">
                            <form>
                                <div id="search" style="width: 460px;">
                                <form name="search_form" action="{$form_action}" method="get">
                                    <table>
                                    <thead>
                                    
                                        <tr>
                                            <th width="160px;">
                                                <a  id="show_groups">{$groups_icon}</a>
                                                <select onchange="this.form.submit();" id="group" name="group" style="width:150px;">
                                                  {foreach from=$user_groups item=group}
                                                        <option  {if $groupId == $group.id} selected="true" {/if} value="{$group.id}">{$group.key}</option> 
                                                  {/foreach}                                          
                                                </select>
                                            </th>
                                            <th><input name="search" type="text" value="{$search}" /></th>
                                            <th width="75px"><a style="width:75px;" id="insert" class="medium green button" >{$lang.insert}</a> </th>
                                        </tr>
                                        </thead>
                                    </table>
                                </form>
                                </div>
                                
                                <div id="pages">
                                    <table>
                                    <thead>
                                        <tr>
                                            <th>{$lang.page}&nbsp;</th>
                                            <th style="padding-right:10px; padding-left:5px; ">
                                                <form action="{$form_action}" name="listing" method="get">
                                                    <select onchange="this.form.submit();" name="page" style="width:50px;">
                                                        {section name=pages start=1 loop=$pages_count+1 step=1}
                                                            <option  {if $page == $smarty.section.pages.index} selected="true" {/if} value="{$smarty.section.pages.index}">{$smarty.section.pages.index}</option>                                           
                                                        {/section}
                                                    </select>
                                                </form>
                                            </th>
                                            <th>&nbsp;{$lang.from}&nbsp;</th>
                                            
                                            <th>&nbsp;{$pages_count}&nbsp;</th>
                                            <th style="padding-left:10px;">{$prev_link}</th>
                                            <th style="padding-left:10px;">{$next_link}</th>
                                            
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                                
                                
                            </form>
                            </div>
                            <div style="clear:both;"></div>
                            <table border="0" width="100%" cellspacing="1" cellpadding="0" class="dataTable">
                              <thead>
                                <tr>
                                  <th>{$lang.table_title}</th>
                                  <th>{$lang.table_code}</th>
                                  <th>{$lang.table_template}</th>
                                  <th>{$lang.table_language}</th>
                                  <th width="150">{$lang.table_heading_action}</th>
                                </tr>
                              </thead>
                              <tfoot>
                                <tr>
                                  <th colspan="5">
                                      <div style="float:left"> {$lang.total}:&nbsp;{$total_items}&nbsp;{$lang.items}</div>
                                      <div style="float:right">{$lang.table_tip}</div>
                                  </th>
                                  
                                </tr>
                              </tfoot>
                              <tbody>
                                {foreach from=$blocks item=block name=pages}
                                <tr   class="{if $smarty.foreach.pages.index mod 2 > 0} row1{else} row0{/if}">
                                  <td id="hiden">{$block.id}</td>
                                  <td id="click"><img src="{$BACKEND_IMAGES}icons/block.png" /> &nbsp;{$block.title}</td>
                                  <td >{if $block.code == ''} ----------- {else} {$block.code} {/if}</td>
                                  <td >{$block.template}</td>
                                  <td >{if $block.language == ''} ----------- {else} {$block.language} {/if}</td>
                                  <td id="hiden">{$block.js}</td>
                                  <td id="hiden">{$block.css}</td>
                                  <td align="right"><span id="action" class="edit">{$edit_icon}</span>&nbsp; <a href="{$block.language_editor}"> {$language_editor}</a>&nbsp; <a href="#" onclick="trash('{$block.title}', '{$block.trash}');" class='osx'> {$delete_icon}</a>&nbsp;</td>
                                </tr>
                                {/foreach}
                              </tbody>
                            </table>	
                        </div>
                    </form>
                    </fieldset>
                   
                   
                    <fieldset class="step">
                     <form class="valid" name="new_block" action="{$form_action}" method="post">
                        <legend>
                        {$lang.create}
                        <img id="{$curLanguage.code}" class="flag selected" src="{$curLanguage.icon}" />
                            {foreach from=$languages item=cur}
                                <img id="{$cur.code}" class="flag" src="{$cur.icon}" />
                            {/foreach}
                        </legend>
                        <div id="formholder">
                             <div id="{$curLanguage.code}" class="selected_container">
                                <p id="lang" class='block'>
                                    <label class='text' for="name">{$lang.title}&nbsp;{$curLanguage.code}<span style="color: red;">*</span></label>
                                    <input class="lang" name="title_{$curLanguage.code}" type="text" validate='text'  />
                                </p>
                            </div>
                            {foreach from=$languages item=cur}
                                <div id="{$cur.code}" class="lang_container" style="display:none;">
                                    <p id="lang" class='block'>
                                        <label class='text' >{$lang.title}&nbsp;{$cur.code}<span style="color: red;">*</span></label>
                                        <input class="lang" name="title_{$cur.code}" type="text" validate='text'  />
                                    </p>
                                </div>
                            {/foreach}
                            <p class='block'>
                                <label class='text' >{$lang.template}<span style="color: red;">*</span></label>
                                <input id="template" name="template" validate='text' type="text"  />
                            </p>
                            <p class='block'>
                                <label class='text' >{$lang.language}<span style="color: red;">*</span></label>
                                <input id="language" name="language" type="text"  validate='text' />
                            </p>
                            <p class='block'>
                                <label class='text'>{$lang.class}</label>
                                <input id="class" name="class" type="text"  />
                            </p>
                            <p class='block'>
                                <label class='text' >{$lang.description}</label>
                                <input id="description" name="description" type="text"  validate='text' />
                            </p>
    
                        </div>
                        <div id="jump"></div>
                        <div id="formtip">
                            <p class='block' >
                                <label class='text' for="website">{$lang.JS}</label>
                                <input id="JS" name="JS" type="text"  />
                            </p>
                            
                            <p class='block' >
                                <label class='text' for="website">{$lang.CSS}</label>
                                <input id="CSS" name="CSS" type="text"  />
                            </p>
                            
                            <p class='block'>
                                <label class='text' >{$lang.admin_block}</label>
                                <input  class="checkbox" name="admin" type="checkbox"  />
                            </p>
                            
                            <div id="buttonPlace">
                              <a style="width:150px;" class="large green button" onclick="new_block.submit();" >{$lang.create_block}</a> 
                              <a style="width:150px;" id="cancel" class="large red button" >{$lang.cancel}</a> 
                            </div>
                            
                            
                        </div>
                        <input name="create" value="true" type="hidden" />
                    </form> 
           
                    </fieldset>
                    
                    
                    <fieldset class="step" >
                    <form class="valid" name="edit_block" action="{$form_action}" method="post">
                        <legend>
                            {$lang.edit_block}
                            <img id="{$curLanguage.code}" class="flag" src="{$curLanguage.icon}" />
                        </legend>
                        <div id="formholder">
                            <input type="hidden" id="block_id" name="id" />
                            <p class='block'>
                                <label class='text' >{$lang.title}</label>
                                <input id="edit_title" name="title" type="text"  />
                            </p>
                            <p class='block'>
                                <label class='text' >{$lang.class}</label>
                                <input id="edit_class" name="class" type="text"  />
                            </p>
                            <p class='block'>
                                <label class='text' >{$lang.template}</label>
                                <input id="edit_template" name="template" placeholder="xExample.tpl" type="tel"  />
                            </p>
                            <p class='block'>
                                <label class='text' >{$lang.language}</label>
                                <input id="edit_language" name="language" placeholder="xExample.xml" type="tel"  />
                            </p>
                      
                        </div>
                        <div id="jump"></div>
                        <div id="formtip">
                            
                           <p class='block' >
                                <label class='text' for="website">{$lang.JS}</label>
                                <input id="edit_JS" name="JS" type="text"  />
                            </p>
                            
                            <p class='block' >
                                <label class='text' for="website">{$lang.CSS}</label>
                                <input id="edit_CSS" name="CSS" type="text"  />
                                <input type="hidden" name="edit" />
                            </p>
                            
                            <p class='block'>
                                <label class='text' >{$lang.rename_files}</label>
                                <input  class="checkbox" name="rename" type="checkbox"  />
                            </p>
                            
                            
                            <div id="buttonPlace">
                              <a style="width:150px;" class="large green button" onclick="edit_block.submit();" >{$lang.apply}</a> 
                              <a style="width:150px;" id="cancel2" class="large red button" >{$lang.cancel}</a> 
                            </div>
                            
                            
                        </div>
                    </form>    
                    </fieldset>
                    
                    
					<fieldset class="step" style="height:325px;">
                    <form>
                        <legend>{$lang.help}</legend>
                        
						<p class='block'>
							Everything in the form was correctly filled 
							if all the steps have a green checkmark icon.
							A red checkmark icon indicates that some field 
							is missing or filled out with invalid data. In this
							last step the user can confirm the submission of
							the form.
						</p>
                    </form>
                    </fieldset>
                    
            </div>
            <div id="navigation" style="display:none;">
                <ul>
                    <li class="selected">
                        <a href="#">{$lang.all_blocks}</a>
                    </li>
                    <li>
                        <a href="#">{$lang.create}</a>
                    </li>
                    <li>
                        <a href="#" style="display:none;"></a>
                    </li>
                    <li>
                        <a href="#">{$lang.help}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
  </div>

  
  
  
    <div id="osx-modal-content">
    	<div id="osx-modal-title">{$lang.conf}</div>
        
    	<div class="close"><a href="#" class="simplemodal-close">x</a></div>
    	<div id="osx-modal-data">
    		<h2>{$lang.del_conf} <span id="item"></span>{$lang.block}?</h2>
            <div id="blockButtons">
              <a style="width:80px;" id="delete" class="medium green button"  >{$lang.delete}</a> 
              <a style="width:80px;" class="medium red button simplemodal-close" >{$lang.cancel}</a> 
            </div>
    	</div>
    </div> 
    
</div>